<template>
    <div>
        <div>
            <div ref="editor" style="text-align: left"></div>
            <input :value="htmlBody" type="hidden" @input="htmlBody=$event.target.value" />
        </div>
        <!-- 选择图片 -->
        <el-dialog title="选择图片" :visible.sync="imgFormVisible">
          <div>
            <div>
              <!-- <vue-select-image :data-images="dataImages" :h="'100'" :w="'140'" :use-label="true" @onselectimage="onSelectImage"> -->
              <vue-select-image :data-images="dataImages" :h="'100'" :w="'100'" @onselectimage="onSelectImage">
              </vue-select-image>
            </div>
            <div>
              <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="pageNum"
                :page-size="pageSize"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                >
              </el-pagination>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="imgFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitSelectImage">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    import wangeditor from 'wangeditor'
    import {uploadServerURL} from '@/config'
    import VueSelectImage from 'vue-select-image'
    require('vue-select-image/dist/vue-select-image.css')
    import {
      getResourceList
    } from '@/api/news.js'

    export default {
      name: 'ShenMaEditor',
      components: { VueSelectImage },
      model: {
          prop: "message",
          event: "change"
        },
      props: {
        message: {
          type: [String],
          default: ""
        },
      },
      data() {
          return {
              uploadFileServer: uploadServerURL,
              editor: null,
              messageInit: false,
              htmlBody: '',
              imgFormVisible: false,
              dataImages: [],
              pageNum: 1,
              pageSize: 12,
              total: 0,
              imageSelectUrl: null,
          }
      },
      watch: {
        message(newVal, oldVal) {
          console.log('newVar', newVal);
          // this.htmlBody = newVal
          // this.$emit("change", newVal);
          // this.editor.txt.html(newVal)
          if(!this.messageInit) {
            this.messageInit = true
            this.editor.txt.html(newVal)
          }
        },
        htmlBody(newVal, oldVal) {
          this.$emit("change", newVal);
        }
      },
      mounted() {
          let that = this
          this.editor = new wangeditor(this.$refs.editor)
          console.log('ShenMaEditor,create2...');
          this.editor.config.uploadImgServer = this.uploadFileServer + '/upload/uploadFileWang'
          this.editor.config.uploadFileName = 'file'
          // 配置全屏功能按钮是否展示
          this.editor.config.showFullScreen = true
          this.editor.config.uploadImgMaxLength = 1
          // 自定义字体
          this.editor.config.fontsizes = {
            'x-small': { name: '10px', value: '1'},
            'small': { name: '13px', value: '2'},
            'normal' : { name: '16px', value: '3'},
            'large' : { name: '18px', value: '4'},
            'x-large' : { name: '24px', value: '5'},
            'xx-large' : { name: '32px', value: '6'},
            'xxx-large' : { name : '48px', value: '7'},
          }
          // 图片自定义媒体库
          this.editor.config.uploadImgFromMedia = function () {
            // 做调起媒体库UI等的自定义方法
            // 举个栗子，假设通过confirm方法来模拟调用媒体库
            that.imgFormVisible = true
            // const img = confirm('调用媒体库')
            // if (img) {
            //   const imgUrl = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
            //   // 通过editor.cmd.do方法将媒体库回调的链接插入编辑器内
            //   that.editor.cmd.do(
            //     'insertHTML',
            //     `<img src="${imgUrl}" style="max-width:100%;"/>`
            //   )
            // } else {
            //   console.log('cancel')
            // }
          }

          this.editor.config.onchange = function (newHtml) {
            // console.log("change 之后最新的 html", newHtml);
            that.htmlBody = newHtml
            console.log('html:', that.htmlBody)
          };


          this.editor.create()

          // this.$nextTick(() => {
          //   console.log('$nextTick:--', this.message);
          //   // this.editor.txt.html(this.htmlText)
          // })
          this.loadResourceImages()
      },

      methods: {
        onSelectImage(image) {
          console.log(image)
          this.imageSelectUrl = image.src
        },
        submitSelectImage() {
          this.imgFormVisible = false

          // const img = confirm('调用媒体库')
          if (this.imageSelectUrl) {
            // 通过editor.cmd.do方法将媒体库回调的链接插入编辑器内
            this.editor.cmd.do(
              'insertHTML',
              `<img src="${this.imageSelectUrl}" style="max-width:100%;"/>`
            )
          } else {
            console.log('cancel')
          }
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`)
          this.pageNum = val
          if(this.imgFormVisible) {
            this.loadResourceImages()
          }
          else {
            this.loadResourceVideos()
          }
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`)
          this.pageSize = val
          if(this.imgFormVisible) {
            this.loadResourceImages()
          }
          else {
            this.loadResourceVideos()
          }
        },
        loadResourceImages() {
          let param = {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            keyWord: 'image'
          }
          getResourceList(param).then(res => {
            console.log('getResourceList', res);
            if(res.code == 200) {
              this.dataImages = []
              res.data.records.forEach(item => {
                let img = {
                  id: item.fileId,
                  src: item.fileUrl,
                  alt: item.fileName
                }
                this.dataImages.push(img)
              })
              // this.tableData = res.data.records
              this.pageNum = res.data.current
              this.pageSize = res.data.size
              this.total = res.data.total
            }
          })
        },
      },




    }
</script>

<style>
/* 解决wangEditor覆盖其他组件的问题 */
.w-e-toolbar {
  z-index: 2 !important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}
</style>
